<template>
    <div class="home-hot">
        <MyPanel title="人气推荐" subTitle="人气爆款 不容错过">
            <!-- 使用默认插槽 -->
            <ul class="goods-list">
                <li class="item" v-for="item in goods" :key="item.id">
                    <router-link to="/">
                        <img :src="item.listPicUrl" alt="">
                        <div class="title ellipsis-2">{{ item.name }}</div>
                    </router-link>
                </li>
            </ul>
        </MyPanel>
    </div>
</template>

<script>
import { ref } from 'vue';
import MyPanel from '@/components/MyPanel.vue'
import { getHot } from '@/api'
export default {
    components: {
        MyPanel
    },
    setup(props) {
        const goods = ref([])
        const getHotList = async () => {
            try {
                const res = await getHot();
                // console.log(res);
                if (res.msg == '操作成功') {
                    goods.value = res.result.slice(0, 4)
                    console.log(goods.value);
                }
            } catch (error) {
                console.log(error);
            }
        }
        getHotList();

        return { goods };
    }
}
</script>

<style lang="less" scoped>
.home-hot {
    .goods-list {
        display: flex;
        justify-content: space-between;
        margin-bottom: 50px;

        .item {
            width: 265px;
            height: 365px;
            background-color: #f5f5f5;

            img {
                width: 265px;
                height: 265px;
            }

            .title,
            .price {
                font-size: 16px;
                padding: 15px;
                padding-bottom: 10px;
                text-align: center;
            }

            .price {
                padding: 5px;
                font-size: 14px;
                color: #CF4444;

                del {
                    color: #999999
                }
            }

            .hoverShadow ();
        }
    }
}
</style>